{% extends 'base.html' %}

{% block content %}
    <!--菜单栏下大图部分-->
    <div class="ui vertical basic contain">
        <div class="ui banner img" style="background: url(http://or6fe9yua.bkt.clouddn.com/image/banner.jpg);background-size: cover; height:250px; text-align:center;">
            <div class="ui  header" style="padding-top:100px">
                <h1 class="ui inverted  header" style="font-size:40px; color: #FF00FF">Beyond The Memory</h1>
                <h3 class="ui inverted  header" style="font-size:20px; color: #00CCCC">THERE IS NO FIRE LIKE LUST, NO GRIP LIKE HATE; THERE IS NO NET LIKE DELUSION, NO RIVER LIKE CRAVING.</h3>
            </div>
        </div>
    </div>
    <!--分割线部分-->
    <div class="ui horizontal divider header" style="height:10px">
        <i class="tiny file word outline icon"></i>
        {{ headlines }}
    </div>
    <!--文章部分-->
    <div class="ui four column centered grid">
      {% for article in  articles %}
      <div class="column">
          <div class="ui image" style="margin:50px; width: auto; height: auto;">
            <a href="/detail?query={{ article.id }}">
            <img src="{{ article.cover }}">
            <a class="ui label" style="margin:5px;"><i class="table icon"></i>{{ article.category }}</a>
              <h3 class="ui header" style="margin:0px;"><a href="/detail?query={{ article.id }}">{{ article.title }}</a></h3>
            <div class="ui label" style="margin-bottom:20spx;">
                <i class="add to calendar icon"> {{ article.created_time }}</i>
                <i class="user icon"> by:{{ article.author }}</i>
            </div>
            </a>
          </div>
      </div>
      {% endfor %}
    </div>
{% endblock %}
